<template>
  <div class="app-container">
    <api-bar
      @query="search"
      @add_collection="add_collection"
    />
    <div id="table">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        element-loading-text="玩命加载中..."
      >
        <el-table-column
          prop="id"
          label="ID"
        />
        <el-table-column
          prop="name"
          label="参数名称"
        />
        <el-table-column
          prop="desc"
          label="描述"
          show-overflow-tooltip
        />
        <el-table-column
          prop="value"
          label="参数值"
          show-overflow-tooltip
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handle_edit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handle_delete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="edit">
      <el-dialog
        v-loading="loading"
        :title="dialog_title"
        :visible.sync="dialogFormVisible"
        element-loading-text="玩命加载中..."
      >
        <el-form :model="form">
          <el-form-item
            label="参数名称"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.name"
              style="width: 50%"
              placeholder="请输入参数名称"
            />
          </el-form-item>
          <el-form-item
            label="描述"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.desc"
              type="textarea"
              style="width: 50%"
              placeholder="请输入参数描述"
            />
          </el-form-item>
          <el-form-item
            label="参数值"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.value"
              style="width: 50%"
              placeholder="请输入参数值"
            />
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogFormVisible = false">
            取 消
          </el-button>
          <el-button
            type="primary"
            :loading="button_loading"
            @click="operate"
          >
            确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
    <div id="pagination">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="filter_query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getParameter, deleteParameter, postParameter, putParameter } from '@/api/parameter'
import ApiBar from './components/ApiBar'
export default {
  name: 'Parameter',
  components: {
    ApiBar
  },
  data: function() {
    return {
      currentPage: 1,
      total: 0,
      filter_query: {
        search: undefined,
        limit: 10,
        page: 1
      },
      tableData: [],
      dialogFormVisible: false,
      dialog_title: '添加',
      form: {
        name: '',
        value: '',
        desc: ''
      },
      formLabelWidth: '120px',
      value: [],
      loading: false,
      button_loading: false,
      id: undefined
    }
  },
  mounted: function() {
    this.get_page_data()
  },
  methods: {
    handleSizeChange(val) {
      this.filter_query.limit = val
      this.filter_query.page = 1
      this.get_page_data()
    },
    handleCurrentChange(val) {
      this.filter_query.page = val
      this.get_page_data()
    },
    data_to_string(data) {
      const tmp = new FormData()
      for (var key in data) {
        tmp.append(key, data[key])
      }
      return tmp
    },
    get_page_data: function() {
      this.loading = true //
      getParameter(this.filter_query).then((response) => {
        this.tableData = response.data.data
        this.total = response.data.count
        this.loading = false //
      })
    },
    search: function(value) {
      this.filter_query.search = value
      this.filter_query.page = 1
      this.get_page_data()
    },
    handle_edit(row) {
      this.form = Object.assign({}, { name: row.name, value: row.value, desc: row.desc }) // 深拷贝
      this.form.id = row.id
      this.dialog_title = '编辑'
      this.dialogFormVisible = true // 打开模态框
    },
    handle_delete(row) {
      this.$confirm('确认删除当前参数吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteParameter({ id: row.id }).then((response) => {
          if (response.data.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.get_page_data()
          } else {
            this.$message({
              type: 'error',
              message: response.data.msg
            })
          }
        }).catch((error) => {
          this.$message({
            type: 'error',
            message: error
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        })
      })
    },
    add_collection() {
      this.reset_form()
      this.dialog_title = '添加'
      this.dialogFormVisible = true
    },
    reset_form() {
      // form数据置为空
      this.form = {
        name: '',
        desc: '',
        value: ''
      }
    },
    operate() {
      this.button_loading = true
      if (this.dialog_title === '添加') {
        postParameter(this.data_to_string(this.form)).then((response) => {
          this.button_loading = false
          if (response.data.code === 0) {
            this.dialogFormVisible = false // 关闭模态框
            this.get_page_data()
          } else {
            this.$message({
              type: 'error',
              message: response.data.msg
            })
          }
        })
      } else if (this.dialog_title === '编辑') {
        putParameter(this.data_to_string(this.form)).then((response) => {
          this.button_loading = false
          if (response.data.code === 0) {
            this.dialogFormVisible = false // 关闭模态框
            this.get_page_data()
          } else {
            this.$message({
              type: 'error',
              message: response.data.msg
            })
          }
        })
      }
    }
  }
}
</script>
